<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			header{
				height: 190px;
				background-image: url(img/bj.jpg);
			}
			.box3{
				height: 2400px;
                background-image: url(img/bj2.jpg);
                background-repeat: repeat-x;
                background-origin: ;
            }
            .mid{
            	width: 1200px;
            	height: 200px;
            	margin: 10px auto;
            	border: 30px solid green;
            	padding: 20px;
            	background-image: url(img/zzy.png);
            	background-repeat: no-repeat;
            }
            #grad1 {
                height: 100px;
                background-color: red; /* 针对不支持渐变的浏览器 */
                background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
		</style>
	</head>
	<body>
		
		<div class="box3">
			<header></header>
			<div class="mid">1</div>
			<div class="mid">2</div>
			<div class="mid">3</div>
			<div class="mid">4</div>
			<div class="mid">5</div>
			<div class="mid">6</div>
			<div class="mid">7</div>
		</div>
		<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:60px;font-weight:bold">渐变背景</div>
	</body>
</html>
